<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="120px">
    <el-form-item label="选择类型" prop="type">
      <el-select
        v-model="form.type"
        placeholder="请选择"
        @change="handleTypeChange"
      >
        <el-option label="类型A" value="A"></el-option>
        <el-option label="类型B" value="B"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item
      label="关联输入框"
      :prop="form.type === 'A' ? 'relatedInput' : ''"
    >
      <el-input
        v-model="form.relatedInput"
        :disabled="form.type !== 'A'"
        placeholder="仅类型A需要填写"
      >
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        type: "",
        relatedInput: "",
      },
      rules: {
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        relatedInput: [
          { required: true, message: "请输入内容", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleTypeChange(val) {
      // 当选择类型B时清空输入框
      if (val === "B") {
        this.form.relatedInput = "";
      }
      // 动态验证表单
      this.$nextTick(() => {
        this.$refs.form.validateField("relatedInput");
      });
    },
  },
};
</script>
